<!--
 * @Author: 宋杰
 * @Date: 2020-12-30 17:53:33
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-01-14 17:21:57
 * @Description: 一家十一口(猜一字) 信用评价 >>>评估开放
-->
<template>
  <div class="div1">
    <!-- 头部搜索框 -->
    <div class="div2">
      <div class="topBox3">
        <div class="topBox3_sou">
          <!-- 活动状态 -->
          <div>
            <span>活动状态: </span>
            <el-select v-model="value" placeholder="全部">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>

          <!-- 评估活动标题 -->
          <div>
            <el-input v-model="value1" placeholder="评估活动标题"></el-input>
          </div>

          <el-button type="primary" class="sousuoBox">
            <i class="el-icon-search"></i>
            <span>查找</span>
          </el-button>
        </div>
      </div>
    </div>

    <!-- con -->
    <div class="div3">
      <div class="div3_xinzen">
        <el-button
          type="primary"
          size="small"
          @click="centerDialogVisible2 = true"
          ><i class="el-icon-circle-plus-outline"></i
          ><span>新增</span></el-button
        >
        <!-- 弹窗 身份验证 -->
        <el-dialog :visible.sync="centerDialogVisible2" center class="eldialog">
          <div class="eldialog_top">新增评价活动</div>
          <el-form
            class="elFormBox"
            :label-position="labelPosition"
            label-width="80px"
            :model="formLabelAlign"
          >
            <div class="firstLine">
              <el-form-item label="活动名称">
                <el-input v-model="formLabelAlign.name"></el-input>
              </el-form-item>
              <el-form-item label="活动类型">
                <el-select v-model="formLabelAlign.typeA" @change="scoreClick">
                  <el-option
                    v-for="item in optionsA"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="活动有效期">
                <el-date-picker
                  v-model="formLabelAlign.value2"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="—"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </el-form-item>

              <el-form-item label="活动总分">
                <el-input
                  :disabled="disabled"
                  v-model="formLabelAlign.score"
                  @input="oninputClick(formLabelAlign.score)"
                ></el-input>
              </el-form-item>
            </div>

            <el-form-item class="textareaBox textareaBox2" label="活动说明">
              <el-input
                clear="textareaBox"
                type="textarea"
                v-model="formLabelAlign.region"
              ></el-input>
            </el-form-item>

            <div class="firstLine2">
              <el-form-item class="textareaBox" label="活动发布者">
                <el-input v-model="formLabelAlign.type"></el-input>
              </el-form-item>
            </div>

            <el-form-item class="textareaBox" label="所需材料">
              <el-checkbox-group v-model="formLabelAlign.checkList">
                <el-checkbox label="1">近2年年检材料</el-checkbox>
                <el-checkbox label="2"
                  >法定代表人资格证明文件、职称证件</el-checkbox
                >
                <el-checkbox label="3">评估自评</el-checkbox>
                <el-checkbox label="4"
                  >管理人员、教师、财务人员资格证明文件、职称证件</el-checkbox
                >
                <el-checkbox label="5">评估申请表</el-checkbox>
                <el-checkbox label="6">培训业绩资料(台账等)</el-checkbox>
                <el-checkbox label="7">培训机构章程，各项管理制度</el-checkbox>
                <el-checkbox label="8">其他材料</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button
              plain
              type="primary"
              @click="centerDialogVisible2 = false"
              >取 消</el-button
            >
            <el-button type="primary" @click="centerDialogVisible2 = false"
              >保 存</el-button
            >
          </span>
          <!-- 提示 活动总分-->
          <el-dialog
            class="eldialogBox"
            width="30%"
            :visible.sync="innerVisible"
            append-to-body
          >
          <i class="el-icon-warning-outline" style="color:red"></i>
          请输入1-100的整数！
          </el-dialog>
          <!-- 提示 活动总分 end-->
        </el-dialog>
      </div>
      <div class="div3">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="serialNumber" label="序号" width="80"> </el-table-column>
          <el-table-column prop="ExperienceContent" label="评估活动标题">
          </el-table-column>
          <el-table-column prop="organization" label="活动类型">
          </el-table-column>
          <el-table-column prop="num" label="活动总分">
          </el-table-column>
          <el-table-column prop="ApplicationDate" label="活动创建时间">
          </el-table-column>
          <el-table-column prop="ApplicationDate2" label="活动有效期" width="200">
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >查看</el-button
              >
              <el-button type="text" size="small">启动</el-button>
              <el-button type="text" size="small">关闭</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- con end -->

    <!-- 分页 -->
    <div class="div4">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="100"
        layout="total, prev, pager, next"
        :total="1000"
        background
      >
      </el-pagination>
    </div>
    <!-- 分页end -->
  </div>
</template>

<script>
//import {} from '';
export default {
  name: "",
  data() {
    return {
      options: [
        {
          value: "1",
          label: "所有"
        },
        {
          value: "2",
          label: "启动"
        },
        {
          value: "3",
          label: "关闭"
        }
      ],
      value: "1",
      value1: "",

      // con
      tableData: [
        {
          serialNumber: "1",
          ApplicationDate: "2020.2.6",
          ApplicationDate2: "2020.10.01-2020.10.10",
          type: "评估申请",
          organization: "年度总评",
          ExperienceContent: "2020年度评估活动",
          ReviewOperation: "申报单位自评",
          num: "100"
        }
      ],
      // con end
      // 分页
      currentPage1: 5,
      // 分页end
      centerDialogVisible2: false, //弹窗
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
        value2: "",
        typeA: "1", //活动类型
        score: "", //活动总分
        checkList: [] //所需材料
      },
      //   弹窗 日期
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      // 弹窗活动类型
      optionsA: [
        {
          value: "1",
          label: "年度总评"
        },
        {
          value: "2",
          label: "普通活动"
        }
      ],
      disabled: false,
      innerVisible: false
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.scoreClick();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 操作
    handleClick(row) {
      this.$router.push({ name: "AssessmentOpenDetails" });
      console.log(row);
    },
    // 活动总分判断
    scoreClick() {
      if (this.formLabelAlign.typeA == "1") {
        this.formLabelAlign.score = "100";
        this.disabled = true;
      } else {
        this.formLabelAlign.score = "";
        this.disabled = false;
      }
    },
    // 判断只能输入1-100的数字
    oninputClick(val) {
      let reg = new RegExp("^([1-9]|[1-9]\\d|100)$");
      this.formLabelAlign.score = val;
      if (!reg.test(this.formLabelAlign.score)) {
        this.innerVisible = true
        this.formLabelAlign.score = "";
      }
    }
  }
};
</script>
<style scoped>
.div1 {
  /* border: 1px solid #000; */
  background: #f5f6fa;
}

/* 头部搜索 */
.div2 {
  margin-bottom: 20px;
}
.div2,
.div3 {
  /* border: 1px solid rgb(18, 141, 241); */
  background: #fff;
  /* border-radius: 8px; */
  padding: 10px;
}
.div3 >>> .cell {
  line-height: 22px;
}
.topBox3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  width: 100%;
  height: 49px;
}
/* 头部搜索 */
.sousuoBox {
  margin-left: 10px;
  height: 30px !important;
  padding: 0;
  width: 60px;
}
.topBox3_sou {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.topBox3_sou >>> .el-input {
  width: 180px;
}
.topBox3_sou > :nth-child(1) {
  margin-right: 10px;
}
.topBox3_sou >>> .el-input__inner {
  height: 30px !important;
  line-height: 32px;
}

.topBox3_sou1 >>> .el-input__prefix {
  /* height: 30px !important; */
  display: flex;
  /* justify-content: flex-end; */
  width: 100%;
}
.topBox3_sou >>> .el-input__icon {
  /* height: 30px !important; */
  line-height: 32px;
  margin-right: 20px;
}
.topBox3_sou1 >>> .el-input__icon.el-icon-date {
  /* height: 30px !important; */
  line-height: 32px;
  margin-right: 20px;
  margin: 0;
  position: absolute;
  top: 0;
  right: 5px;
}
.topBox3_sou1 >>> .el-input__suffix {
  right: 25px;
}
/* 头部搜索end */

/* 内容 */
.div3 >>> .el-table thead {
  color: rgb(75, 74, 74) !important;
}
/* 内容end */
/* 分页 */
.div4 {
  background: #fff;
  width: 100%;
}
.div4 > :nth-child(1) {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.div4 >>> .el-pagination__total {
  position: absolute;
  left: 5px;
}
/* 分页end */

/* 新增 */
.div3_xinzen {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

/* 弹窗 */
.eldialog >>> .el-dialog {
  position: relative;
  min-width: 1000px;
  min-height: 400px;
  border-radius: 6px;
  padding: 10px;
}
.elFormBox >>> .el-dialog__body {
  padding: 10px 0 0 0;
}
.elFormBox >>> .el-form-item {
  margin-bottom: 10px !important;
}
.eldialog >>> .el-dialog__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-bottom: 1px solid #eee;
}
.eldialog >>> .el-dialog__headerbtn {
  top: 15px;
}
.eldialog_top {
  position: absolute;
  top: 10px;
  left: 10px;
  height: 30px;
  line-height: 30px;
}

.firstLine {
  /* border: 1px solid #000; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.firstLine >>> .el-form-item {
  min-width: 450px;
}
.firstLine2 >>> .el-form-item {
  width: 450px;
}
.firstLine >>> .el-form-item__label {
  width: 100px !important;
}
.firstLine >>> .el-form-item__content {
  margin-left: 100px !important;
}
.firstLine >>> .el-select {
  min-width: 100%;
}
.textareaBox >>> .el-form-item__label {
  width: 100px !important;
}
.textareaBox >>> .el-form-item__content {
  margin-left: 100px !important;
}
.textareaBox2 >>> .el-textarea__inner {
  max-height: 60px;
}
.textareaBox >>> .el-checkbox-group {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.textareaBox >>> .el-checkbox-group > label {
  width: 400px;
  margin-right: 0 !important;
}

.eldialogBox >>>.el-dialog{
  border-radius: 10px;
}
</style>
